<template>
	<div class="comming">
		<div class="coming_top">
			<h1>近期备受期待</h1>


 <div id="show">
        
        <div class="c_t_box">
            <swiper  ref="mySwiper" :options="swiperOption">
                <!-- slides -->
                <swiper-slide  v-for="(m,n) in coming" :key='m.id' 
                	class="c_t_movie">
                   		<img v-lazy="picFix(m.img,'85.115')"/>
						<h1>{{m.nm}}</h1>
						<h2>{{m.comingTitle}}</h2>
						<span class="ctwish_bg"></span>
						<span class="c_t_wish">{{m.wish}}人想看</span>
                </swiper-slide>
            </swiper>
        </div>



    </div>
<!--
			<div class="c_t_box">
				<div class="c_t_movie"
					v-for="(m,n) in coming">
						
						<img :src="picFix(m.img,'85.115')"/>
						<h1>{{m.nm}}</h1>
						<h2>{{m.comingTitle}}</h2>
						<span class="ctwish_bg"></span>
						<span class="c_t_wish">{{m.wish}}人想看</span>
				</div>
			</div>
			-->
			
			
			
		</div>
		
		<div class="cmbigboss"
			v-infinite-scroll="loadMore" 
  			infinite-scroll-distance="20"
  			infinite-scroll-disabled="open"
			>
			
		
		<div v-for="item in day"
			class="com_movie_day_box">
			<h1>{{item[0].comingTitle}}</h1>
			
			<div v-for="movie in item"
				class="com_movie">
			
				
				<img v-lazy="picFix(movie.img,'64.90')"/>
					
			
				<p class="com_movie_s"
					v-if="movie.showInfo"
					>预售</p>
				<p class="com_movie_w"
					v-else
					>想看</p>
				<div class="com_movie_middle">
					<h1>{{movie.nm}}</h1>
					<h2>{{movie.wish}} <span>人想看</span></h2>
					<h3>主演：{{movie.star}}</h3>
					<h4>{{movie.rt}}上映</h4>
				</div>
				
				 
			</div>
		</div>
	</div>
	</div>
</template>

<style lang="scss">
img[lazy=loading] {
  width: 20px;
  height: 20px;;
  margin: auto;
}
</style>
<script type="text/javascript">
export default{
	
		created(){
//			this.myTools.halo() // 使用  引入的工具库 里的函数 要加 this.自定义的名称.函数名称
			
//			请求近期最受期待  数据
			this.axios_near()
//			请求电影列表数据
			this.axios_comingList()
			this.$nextTick(()=>{ //渲染出结构才能往下走(更新完DOM后)
//				console.log(this.$refs)
				this.$refs.mySwiper.$on('reachEnd',()=>{
					 console.log('ends',this.$refs.mySwiper.swiper.activeIndex)
					 this.axios_nearMore(this.nearMoreOffset)
					 this.nearMoreOffset+=10
				})
			})
		},
		data(){
			return{
				coming:'',
				list:[],
				movieIds:[],
				day:{},
				open:true,
				i:10,j:20,
				swiperOption:{
                 slidesPerView: 'auto',   // 两侧的张数设为auto 
                 spaceBetween: 20,        // swiper-slide之间的空隙（margin值）
//               centeredSlides:true,    // 是否居中
//               slidesPerView: 3,
//     			 spaceBetween: 30,
//        		 freeMode: true,
           		},
           		             
           		nearMoreOffset:10// 请求的默认偏移值
//				open:false,
			}
		},
		methods:{
			loadMore(){
				this.open=true;
				console.log( " hasbeen " ); 
				var arr=[];	// 用来装新增的 电影id
			for(this.i;this.i<this.j;this.i++){
			 if(this.all_movieIds[this.i]==undefined){// 没有更多的数据就跳出
					break;
			 }else{
				arr.push(this.all_movieIds[this.i])
				}
			}
			arr=arr.toString()
			
			this.axios.get('/ajax/moreComingList',{
						params:{
							ci:20,
							token:"",
							limit:10,
							movieIds:arr
					}
				}).then( 
					(res)=>{
						this.list=this.list.concat(res.data.coming)
						console.log( this.list);
					// 下面处理 拼接后的list数据 ， 遍历用的是day	
						
					let days = {};//先不直接改变 data里的值
					//  遍历存起来的电影列表
					this.list.forEach( (item)=>{
						let keyname = item.comingTitle;
						if(days[keyname]==undefined){
							days[keyname] = [];
						}
						days[keyname].push(item);
						//直接给写一个新的键名和内容就能给对象添加属性
					})
					this.day = days;
					
					this.open=false;//得到数据后开启滚动条开关
					 } )
					this.j+=10;
					console.log( 'i',this.i ,this.j); 
					console.log( this.open ); 
		},
			axios_nearMore(offset){	//请求 横向到底的数据
				this.axios.get('/ajax/mostExpected',
					{params:
						{ci:20,
						limit:10,
						offset:offset,
						token:"",}
					}		  ).then(
						(res)=>{
							this.coming=this.coming.concat(res.data.coming)
							console.log( "横向",this.coming); 
						
						}
					)
			},
			
			axios_comingList(){ //  电影列表数据
				this.axios.get('/ajax/comingList',
					{params:
						{ci:20,
						token:"",
						limit:10}
					}		 
				).then( (res)=>{
					this.list=res.data.coming		
					this.all_movieIds=res.data.movieIds
					console.log( this.list ); 
					let days = {};//先不直接改变 data里的值
					//  遍历存起来的电影列表
					this.list.forEach( (item)=>{
						let keyname = item.comingTitle;
						if(days[keyname]==undefined){
							days[keyname] = [];
						}
						days[keyname].push(item);
						//直接给写一个新的键名和内容就能给对象添加属性
					})
					this.day = days;
//					this.$forceUpdate();强制更新视图
					console.log('抽出相同的日期:', this.day ); 
					
					//////////打开滚动条
 					this.open=false;//
 					//////////////////
 					
// 					console.log( this.all_movieIds,this.list ); 
									} )		
			},

			axios_near(){// 近期最受期待
				// 请求到 页面需要的数据
				this.axios.get('/ajax/mostExpected',{params:
					{ci:20,
					limit:10,
					offset:0,
					token:""}
					}).then(
					(res)=>{
							this.coming=res.data.coming
//							console.log('near_res',res)


					////////// ？？？？？？
//					this.swiper.slideTo(0, 1000, false)
					//////////
					
					
					}	)
			},
			
			// 修改图片尺寸
  				picFix(url,string){
  					if(typeof url == 'string'){
  				 return	url.replace('w.h',string)
  				 }
  				},
		},
		
		
		 computed:{
		 	
		      swiper() {
		        //   获取swiper实例里的数据，包含改变index的方法
		        return this.$refs.mySwiper.swiper
		        						//	？？？
		      }
    		},
		
		
		
}
</script>

<style lang="scss">
	/*轮播图自定义样式*/
	#show{
    width: 100%;
    
    .swiper-slide{
        width:85px !important;
        height:160px;
        img{
            width:85px;
            height:115px;
        }
    }

}
	
	
	
	.cmbigboss{
		margin-top: 11px;background-color: white;
	}
	.com_movie_day_box{
		text-align: left;
		padding: 12px 15px 0;
   		 margin: 0;
    		font-size: 14px;
    		color: #333;
	}
	.com_movie{
		border-bottom: 1px solid #e1e1e1;
		text-align: left;
		box-sizing: border-box;
		padding: 12px 14px 12px 0;
		width: 100%;height: 114px;
		h1,h2,h3,h4{ 
			text-overflow:ellipsis; /*文本溢出的裁切方式   ellipsis用省略号*/
        	white-space: nowrap;    /*是否换行   nowrap不换行*/
        	overflow: hidden;       /*超出部分隐藏*/
        	}
		img{
			margin-left: 15px;
			float: left;width: 64px;height: 90px;}
		h1{    font-size: 17px;
   				color: #333;
    			font-weight: 700;
    			margin-bottom: 7px;height: 25px;
    	}
    	h2{		height: 15px;
    			margin-top: 6px;
    			color: #faaf00;
   				font-size: 15px;
    			font-weight: 600;
    			span{ 
    				font-size: 13px;
					color: #666;
					}
    	}
    	h3{		height: 15px;
    			margin-top: 6px;
    		    font-size: 13px;
    			color: #666;
    	}
    	h4{height: 15px;
    		margin-top: 6px;
    	    font-size: 13px;
    		color: #666;	
    	}		
    	.com_movie_middle{
    		
    		display: block;
    		margin-left: 94px;
    	}
    	.com_movie_s{
    		margin-top: calc(44px - 13px);
    		float: right;background-color: #3c9fe6;   
    		 width: 47px;color: white;
		    height: 27px;
		    line-height: 28px;
		    text-align: center;    
		    border-radius: 4px;
		    white-space: nowrap;
		    font-size: 12px;
		    cursor: pointer;
    	}
    	.com_movie_w{
    		margin-top: calc(44px - 13px);
    		float: right;background-color: #faaf00;   
    		 width: 47px;color: white;
		    height: 27px;
		    line-height: 28px;
		    text-align: center;    
		    border-radius: 4px;
		    white-space: nowrap;
		    font-size: 12px;
		    cursor: pointer;
    	}
	}
	.comming{
		background-color: #f5f5f5;
	}
	h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 16px;}
	.coming_top{
		background: white;
		padding: 12px 0 12px 15px;box-sizing: border-box;
		width: 100%;height: 220px;
		h1{
		text-align: left;color: #333;font-size: 14px;
		margin-bottom: 12px;
		}
		.c_t_box{
			/*width:100%;
			height: 164px;
				 	overflow-x: scroll;
       			 	overflow-y: hidden;
       				white-space: nowrap;*/
			.c_t_movie{
				position: relative;
				display: inline-block;
				width: 85px;margin-right: 10px;
				height: 160px;
				text-overflow:ellipsis; /*文本溢出的裁切方式   ellipsis用省略号*/
        		white-space: nowrap;    /*是否换行   nowrap不换行*/
        		overflow: hidden;       /*超出部分隐藏*/
				/*img{
					width: 85px;height: 115px;
				}*/
				h1{
					text-align: left;
					text-overflow:ellipsis; /*文本溢出的裁切方式   ellipsis用省略号*/
        			white-space: nowrap;    /*是否换行   nowrap不换行*/
        			overflow: hidden;       /*超出部分隐藏*/
					font-weight: bold;
					width: 85px;height: 19px;margin-bottom: 3px;color: #222;font-size: 13px;
				}
				h2{text-align: left;
					text-overflow:ellipsis; /*文本溢出的裁切方式   ellipsis用省略号*/
        			white-space: nowrap;    /*是否换行   nowrap不换行*/
        			overflow: hidden;       /*超出部分隐藏*/
					width: 85px;height: 17px;color: #999;font-size: 12px;
				}
				.ctwish_bg{
					width: 100%;height: 32px;
					position: absolute;
						top: calc(115px - 32px);
						left: 0;
						background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
				}
				.c_t_wish{
						padding-left: 2px;
						position: absolute;z-index: 2;
						top: calc(115px - 16px);
						left: 0;
					    color: #faaf00;
    					font-size: 11px;
    					font-weight: 600;
				}
			}
		}
	}
	
</style>